// 资产总览
import type { Module, ActionContext } from 'vuex'
import type { AxiosResponse } from 'axios'
import type { AssetOverviewStateType } from './typings'
import {
  getAssetModelList,
  getAssetModelReport,
  getAssetModelAreaRatioReport,
  getAssetModelAreaDataReport,
  getAssetModelMonthInputDataReport,
  getLamppostTotalClassify,
  getStreetTotalList
} from '~/api/assetManagement/assetOverview'
import * as echarts from 'echarts'

const assetOverviewImageSelectList = [
  {
    // 配电设施
    code: 'Distribution',
    icon: 'icon-xinzenggongdan-mianxing',
    iconImage: '/assetOverview/temporaryIconImage/monitorBox.png', // icon暂用切图, 阿里图标库上传好了再去掉这句
    backgroundImage: "url('/assetOverview/purple.png')"
  },
  {
    // 灯源
    code: 'LampBase',
    icon: 'icon-xinzenggongdan-mianxing',
    iconImage: '/assetOverview/temporaryIconImage/lamp.png', // icon暂用切图, 阿里图标库上传好了再去掉这句
    backgroundImage: "url('/assetOverview/lightBlue.png')"
  },
  {
    // 配电回路
    code: 'DistributionLoop',
    icon: 'icon-xinzenggongdan-mianxing',
    iconImage: '/assetOverview/temporaryIconImage/loop.png', // icon暂用切图, 阿里图标库上传好了再去掉这句
    backgroundImage: "url('/assetOverview/green.png')"
  },
  {
    // 灯杆
    code: 'LampPost',
    icon: 'icon-xinzenggongdan-mianxing',
    iconImage: '/assetOverview/temporaryIconImage/pole.png', // icon暂用切图, 阿里图标库上传好了再去掉这句
    backgroundImage: "url('/assetOverview/blue.png')"
  }
]

// 自定义的系列颜色
const color1 = new echarts.graphic.LinearGradient(
  0,
  1,
  0,
  0,
  [
    { offset: 0, color: '#c4a6ff' },
    { offset: 1, color: '#996aff' }
  ],
  false
) // 紫
const color2 = new echarts.graphic.LinearGradient(
  0,
  1,
  0,
  0,
  [
    { offset: 0, color: '#1cebd4' },
    { offset: 1, color: '#15d7c2' }
  ],
  false
) // 绿
const color3 = new echarts.graphic.LinearGradient(
  0,
  1,
  0,
  0,
  [
    { offset: 0, color: '#65afff' },
    { offset: 1, color: '#2d92ff' }
  ],
  false
) // 蓝
const color4 = new echarts.graphic.LinearGradient(
  0,
  1,
  0,
  0,
  [
    { offset: 0, color: '#94e4f1' },
    { offset: 1, color: '#53d5e9' }
  ],
  false
) // 浅蓝
const color5 = new echarts.graphic.LinearGradient(
  0,
  1,
  0,
  0,
  [
    { offset: 0, color: '#f59090' },
    { offset: 1, color: '#fb5d5d' }
  ],
  false
) // 红
const color6 = new echarts.graphic.LinearGradient(
  0,
  1,
  0,
  0,
  [
    { offset: 0, color: '#feb500' },
    { offset: 1, color: '#ffa41a' }
  ],
  false
) // 黄
const color7 = new echarts.graphic.LinearGradient(
  0,
  1,
  0,
  0,
  [
    { offset: 0, color: '#f4aafe' },
    { offset: 1, color: '#b972f4' }
  ],
  false
) // 浅紫
const color8 = new echarts.graphic.LinearGradient(
  0,
  1,
  0,
  0,
  [
    { offset: 0, color: '#ffb97f' },
    { offset: 1, color: '#ff6622' }
  ],
  false
) // 橙

const customColorList = [color1, color2, color3, color4, color5, color6, color7, color8]

// 取系列颜色customColorList的0号颜色 为字的系列色
const customFontColorList = [
  '#996aff',
  '#15d7c2',
  '#2d92ff',
  '#53d5e9',
  '#fb5d5d',
  '#ffa41a',
  '#b972f4',
  '#ff6622'
]

const assetOverview: Module<AssetOverviewStateType, AssetOverviewStateType> = {
  namespaced: true,
  state: {
    assetOverviewImageSelectList,
    customColorList,
    customFontColorList,
    getImage: []
  },
  getters: {
    assetOverviewImageSelectList: (state) => state.assetOverviewImageSelectList,
    customColorList: (state) => state.customColorList,
    customFontColorList: (state) => state.customFontColorList,
    getImage: (state) => state.getImage
  },
  mutations: {
    // 获取数量统计的图标及背景图
    GETIMAGE(state, data) {
      state.getImage = data
    }
  },
  actions: {
    // 获取全部数量统计类别
    async GetAssetModelList<S, T>(_: ActionContext<S, T>, params: T) {
      return await getAssetModelList<T>(params).then((res: AxiosResponse) => res?.data)
    },

    // 根据code查询数量统计内容
    async GetAssetModelReport<S, T>(_: ActionContext<S, T>, params: T) {
      return await getAssetModelReport<T>(params).then((res: AxiosResponse) => res?.data)
    },

    // 获取数量统计的图标及背景图
    GetIconAndBackgroundImage({ commit }, params: AssetOverviewStateType['numberStatistic']) {
      for (let i = 0; i < params!.length; i++) {
        const item = params![i]
        for (let j = 0; j < assetOverviewImageSelectList?.length; j++) {
          const element = assetOverviewImageSelectList?.[j]
          if (item.code === element.code) {
            item.icon = element.icon
            item.iconImage = element.iconImage // icon暂用切图, 阿里图标库上传好了再去掉这句
            item.backgroundImage = element.backgroundImage
            break
          } else {
            // 默认
            item.icon = 'icon-xinzenggongdan-mianxing'
            item.iconImage = '/assetOverview/temporaryIconImage/defaultIcon.png' // icon暂用切图, 阿里图标库上传好了再去掉这句
            item.backgroundImage = "url('/assetOverview/default.png')"
          }
        }
      }
      commit('GETIMAGE', params)
    },

    // 工区总设施投入占比图 饼图
    async GetAssetModelAreaRatioReport<S, T>(_: ActionContext<S, T>, params: T) {
      return await getAssetModelAreaRatioReport<T>(params).then((res: AxiosResponse) => res?.data)
    },

    // 工区设施投入对比图 柱状图
    async GetAssetModelAreaDataReport<S, T>(_: ActionContext<S, T>, params: T) {
      return await getAssetModelAreaDataReport<T>(params).then((res: AxiosResponse) => res?.data)
    },

    // 月度设施投入走势图 折线图
    async GetAssetModelMonthInputDataReport<S, T>(_: ActionContext<S, T>, params: T) {
      return await getAssetModelMonthInputDataReport<T>(params).then(
        (res: AxiosResponse) => res?.data
      )
    },

    // 杆高分类统计
    async GetLamppostTotalClassify<S, T>(_: ActionContext<S, T>, params: T) {
      return await getLamppostTotalClassify<T>(params).then((res: AxiosResponse) => res?.data)
    },

    // 街道统计
    async GetStreetTotalList<S, T>(_: ActionContext<S, T>, params: T) {
      return await getStreetTotalList<T>(params).then((res: AxiosResponse) => res?.data)
    }
  }
}

export default assetOverview
